<template>
  <view class="login-container">
    <image class="logo" src="/static/lanqiao.png"></image>
    <view class="input-group">
      <input 
        type="number" 
        v-model="phone" 
        placeholder="请输入手机号"
        maxlength="11"
        @input="validatePhone"
      />
      <view class="error-message" v-if="phoneError">{{ phoneError }}</view>
    </view>
    <view class="input-group">
      <input 
        type="password" 
        v-model="password" 
        placeholder="请输入密码"
        password
        @input="validatePassword"
      />
      <view class="error-message" v-if="passwordError">{{ passwordError }}</view>
    </view>
    <button 
      class="login-button" 
      @click="handleLogin"
      :disabled="isLoading"
    >
      {{ isLoading ? '登录中...' : '登录' }}
    </button>
    <view class="action-links">
      <text class="register-link" @click="goToRegister">立即注册</text>
      <text class="forgot-link" @click="goToForgotPassword">忘记密码?</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      password: '',
      phoneError: '',
      passwordError: '',
      isLoading: false
    };
  },
  methods: {
    validatePhone() {
      if (!this.phone) {
        this.phoneError = '请输入手机号';
        return false;
      }
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.phoneError = '请输入正确的手机号';
        return false;
      }
      this.phoneError = '';
      return true;
    },
    validatePassword() {
      if (!this.password) {
        this.passwordError = '请输入密码';
        return false;
      }
      if (this.password.length < 6) {
        this.passwordError = '密码长度不能少于6位';
        return false;
      }
      this.passwordError = '';
      return true;
    },
    async handleLogin() {
      if (!this.validatePhone() || !this.validatePassword()) {
        return;
      }
      
      this.isLoading = true;
      
      try {
        // 从本地存储中获取用户列表
        const users = uni.getStorageSync('users') || [];
        
        // 查找匹配的用户
        const user = users.find(
          u => u.phone === this.phone && u.password === this.password
        );
        
        if (!user) {
          throw new Error('手机号或密码错误');
        }
        
        // 存储登录信息
        uni.setStorageSync('token', `token-${Date.now()}`);
        uni.setStorageSync('userInfo', {
          userId: user.id,
          username: user.username,
          phone: user.phone
        });
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        
        setTimeout(() => {
          uni.switchTab({ url: '/pages/me/index' });
        }, 1500);
        
      } catch (error) {
        uni.showToast({
          title: error.message || '登录失败',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    },
    async goToRegister() {
      uni.navigateTo({ url: '/pages/register/register' });
    },
    goToForgotPassword() {
      uni.navigateTo({ url: '/pages/forgot/forgot' });
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  height: 100vh;
  background-color: #f8f8f8;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 80rpx;
}

.input-group {
  width: 100%;
  margin-bottom: 40rpx;
}

.input-group input {
  width: 100%;
  height: 100rpx;
  padding: 0 30rpx;
  border: 1px solid #e6e6e6;
  border-radius: 10rpx;
  font-size: 32rpx;
  background-color: #fff;
}

.error-message {
  color: #ff4d4f;
  font-size: 24rpx;
  margin-top: 10rpx;
  height: 30rpx;
}

.login-button {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 36rpx;
  margin-top: 40rpx;
}

.login-button[disabled] {
  background-color: #a0cfff;
}

.action-links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.register-link, .forgot-link {
  color: #007AFF;
  font-size: 28rpx;
}
</style>